<template>
  <div class="fan_container">
    <div class="fan_content">
      <div class="title">
        <span>风机信息</span>
      </div>
      <div class="function">
        <a-button @click="addData">添加</a-button>
        <!-- 添加事件弹出框 -->
        <a-modal
          cancelText="取消"
          okText="确定"
          title="添加风机"
          :visible="addVisible"
          @ok="addHandleOk"
          @cancel="addHandleCancel"
        >
          <div class="addContainer">
            <a-form-model
              :model="fanInfoAddForm"
              :rules="fanInfoAddFormRules"
              ref="fanInfoAddFormRef"
              :label-col="{ span: 4 }"
              :wrapper-col="{ span: 18 }"
            >
              <a-form-model-item prop="name" label="风机名称">
                <a-input v-model="fanInfoAddForm.name" placeholder="请输入" />
              </a-form-model-item>
              <a-form-model-item prop="type" label="风机类型">
                <a-input v-model="fanInfoAddForm.type" placeholder="请输入" />
              </a-form-model-item>
              <a-form-model-item prop="category" label="风机型号">
                <a-input
                  v-model="fanInfoAddForm.category"
                  placeholder="请输入"
                />
              </a-form-model-item>
              <a-form-model-item prop="power" label="风机功率">
                <a-input v-model="fanInfoAddForm.power" placeholder="请输入" />
              </a-form-model-item>
            </a-form-model>
          </div>
        </a-modal>
        <a-input
          v-model="searchText"
          @change="searchChange"
          placeholder="请输入关键字"
        >
          <a-icon slot="prefix" type="search" />
        </a-input>
      </div>
      <div class="table">
        <!-- 表头元素 -->
        <a-table
          :columns="columns"
          :data-source="data"
          rowKey="_id"
          :pagination="{ pageSize: 9 }"
        >
          <span slot="name" slot-scope="text, record" v-html="record.name">{{
            record.name
          }}</span>
          <span
            slot="category"
            slot-scope="text, record"
            v-html="record.category"
            >{{ record.category }}</span
          >
          <span slot="type" slot-scope="text, record" v-html="record.type">{{
            record.type
          }}</span>
          <span slot="power" slot-scope="text, record" v-html="record.power">{{
            record.power
          }}</span>
          <span
            slot="founder"
            slot-scope="text, record"
            v-html="record.founder"
            >{{ record.founder }}</span
          >
          <span
            slot="currentTime"
            slot-scope="text, record"
            v-html="record.currentTime"
            >{{ record.currentTime }}</span
          >
          <span slot="handle" slot-scope="text, record, index">
            <a-tooltip placement="topLeft" title="编辑">
              <img
                @click="edit(record, index)"
                class="editImg"
                src="../../../assets/images/edit.png"
                alt="编辑"
              />
            </a-tooltip>
            <!-- 编辑事件弹出框 -->
            <a-modal
              title="修改风机"
              cancelText="取消"
              okText="确定"
              :visible="editVisible"
              @ok="editHandleOk"
              @cancel="editHandleCancel"
            >
              <div class="editContainer">
                <a-form-model
                  :model="fanInfoEditForm"
                  :rules="fanInfoEditFormRules"
                  ref="fanInfoEditFormRef"
                  :label-col="{ span: 4 }"
                  :wrapper-col="{ span: 18 }"
                >
                  <a-form-model-item prop="name" label="风机名称">
                    <a-input
                      v-model="fanInfoEditForm.name"
                      placeholder="请输入"
                    />
                  </a-form-model-item>
                  <a-form-model-item prop="type" label="风机类型">
                    <a-input
                      v-model="fanInfoEditForm.type"
                      placeholder="请输入"
                    />
                  </a-form-model-item>
                  <a-form-model-item prop="category" label="风机型号">
                    <a-input
                      v-model="fanInfoEditForm.category"
                      placeholder="请输入"
                    />
                  </a-form-model-item>
                  <a-form-model-item prop="power" label="风机功率">
                    <a-input
                      v-model="fanInfoEditForm.power"
                      placeholder="请输入"
                    />
                  </a-form-model-item>
                </a-form-model>
              </div>
            </a-modal>
            <a-tooltip placement="topLeft" title="删除">
              <img
                @click="del(record)"
                class="deleteImg"
                src="../../../assets/images/delete.png"
                alt="删除"
              />
            </a-tooltip>
            <!-- 删除事件弹出框 -->
            <a-modal
              title="确认删除"
              cancelText="取消"
              okText="确定"
              :visible="delVisible"
              @ok="delHandleOk"
              @cancel="delHandleCancel"
            >
              <p class="deleteText">
                <i class="iconfont icon-zhiwei-quanbuzhiwei"></i>
                确认删除{{ delName }}?
              </p>
            </a-modal>
          </span>
        </a-table>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getAllFansInfo,
  addFanInfo,
  changeFanInfo,
  delFanInfo
} from '../../../api/fanInfo'
// import { getUserInfo } from '../../../api/admin'
const columns = [
  {
    title: '风机名称',
    dataIndex: 'name',
    key: 'name',
    ellipsis: true
  },
  {
    title: '创建人',
    dataIndex: 'founder',
    key: 'founder',
    ellipsis: true
  },
  {
    title: '风机类型',
    dataIndex: 'category',
    key: 'category',
    ellipsis: true
  },
  {
    title: '型号',
    dataIndex: 'type',
    key: 'type',
    ellipsis: true
  },
  {
    title: '功率',
    dataIndex: 'power',
    key: 'power',
    ellipsis: true
  },
  {
    title: '创建时间',
    dataIndex: 'currentTime',
    key: 'currentTime',
    ellipsis: true
  },
  {
    title: '操作',
    dataIndex: 'handle',
    scopedSlots: { customRender: 'handle' }
  }
]
export default {
  data() {
    return {
      data: [],
      searchText: '',
      searchData: [],
      columns,
      addVisible: false,
      delId: '',
      delName: '',
      delFounderId: '',
      delVisible: false,
      editVisible: false,
      editIndex: 0,
      fanInfoAddForm: {
        name: '',
        type: '',
        category: '',
        founder: '',
        power: '',
        founder_id: ''
      },
      fanInfoEditForm: {
        name: '',
        type: '',
        category: '',
        founder: '',
        power: ''
      },
      fanInfoAddFormRules: {
        name: [{ required: true, message: '用户名不能为空', tigger: 'blur' }],
        type: [{ required: true, message: '类型不能为空', tigger: 'blur' }],
        category: [{ required: true, message: '型号不能为空', tigger: 'blur' }],
        power: [{ required: true, message: '功率不能为空', tigger: 'blur' }]
      },
      fanInfoEditFormRules: {
        name: [{ required: true, message: '用户名不能为空', tigger: 'blur' }],
        type: [{ required: true, message: '类型不能为空', tigger: 'blur' }],
        category: [{ required: true, message: '型号不能为空', tigger: 'blur' }],
        power: [{ required: true, message: '功率不能为空', tigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getFanInfo()
  },
  methods: {
    // 获取所有风机信息
    getFanInfo() {
      const vm = this
      getAllFansInfo().then((res) => {
        console.log('res', res)
        if (res.code === 200) {
          vm.data = res.data
          vm.data.map((item) => {
            vm.getCTime(item)
            item.id = item._id
            console.log('item', item)
          })
          vm.searchData = JSON.parse(JSON.stringify(res.data))
          console.log('vm.dataaaaaaaaaaaaaaasd', vm.data)
        }
      })
    },
    // 表格的添加事件
    addData() {
      this.fanInfoAddForm.name = ''
      this.fanInfoAddForm.type = ''
      this.fanInfoAddForm.category = ''
      this.fanInfoAddForm.power = ''
      this.addVisible = true
    },
    addHandleCancel() {
      this.addVisible = false
    },
    addHandleOk() {
      const vm = this
      vm.$refs.fanInfoAddFormRef.validate((valid) => {
        if (!valid) return
        // 页面伪添加操作
        // 获取创建人
        const userId = JSON.parse(sessionStorage.getItem('data')).data.user_id
        vm.fanInfoAddForm.founder_id = userId
        console.log('userId', userId)
        console.log('vm.dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa', vm.fanInfoAddForm)

        // 异步添加操作
        addFanInfo(vm.fanInfoAddForm).then((res) => {
          if (res.code === 200) {
            vm.$message.success('添加成功')
            this.addVisible = false
            this.getFanInfo()
            this.searchChange()
          } else {
            vm.$message.error('添加失败!服务器未响应')
            this.addVisible = false
          }
          console.log('resaddFanInfo', res)
        })
      })
    },
    // 表格的编辑事件
    edit(record, index) {
      this.editVisible = true
      this.editIndex = index
      console.log('index', index)
      this.fanInfoEditForm = JSON.parse(JSON.stringify(record))
    },
    editHandleOk() {
      const vm = this
      vm.$refs.fanInfoEditFormRef.validate((valid) => {
        if (!valid) return
        console.log('vm.index', vm.editIndex)
        // 获取创建人
        const operatorId = JSON.parse(sessionStorage.getItem('data')).data
          .user_id
        if (operatorId !== vm.fanInfoEditForm.founder_id) {
          vm.$message.error('操作失败!您没有权限进行此项操作!')
        } else {
          // vm.data.splice(vm.editIndex, 1, vm.fanInfoEditForm)
          console.log(
            'editDatavm.fanInfoEditFormvm.fanInfoEditFormvm.fanInfoEditForm',
            vm.fanInfoEditForm
          )
          changeFanInfo(vm.fanInfoEditForm._id, vm.fanInfoEditForm).then(
            (res) => {
              if (res.code === 200) {
                vm.$message.success('修改成功')
                vm.getFanInfo()
                vm.searchChange()
                console.log('11111111111111', res)
              } else {
                vm.$message.error('添加失败!服务器未响应')
              }
            }
          )
        }
        vm.editVisible = false
      })
    },
    editHandleCancel() {
      this.editVisible = false
    },
    // 表格的删除事件
    del(record) {
      this.delFounderId = record.founder_id
      this.delId = record.id
      this.delName = record.name
      this.delVisible = true
      console.log('key', record.id)
    },
    delHandleOk() {
      const vm = this
      const operatorId = JSON.parse(sessionStorage.getItem('data')).data.user_id
      if (operatorId !== vm.delFounderId) {
        vm.$message.error('操作失败!您没有权限进行此项操作!')
      } else {
        const data = vm.data.filter((item) => item.id !== vm.delId)
        vm.data = data
        delFanInfo(vm.delId).then((res) => {
          vm.$message.info('删除成功')
          console.log('11111111111111', res)
        })
        vm.getFanInfo()
        vm.searchChange()
      }
      vm.delVisible = false
    },
    delHandleCancel() {
      this.delVisible = false
    },
    // 处理时间戳
    getCTime(item) {
      const time = new Date(item.ctime * 1000)
      const y = time.getFullYear()
      const m = time.getMonth() + 1
      const d = time.getDate()
      const h = time.getHours()
      const mm = time.getMinutes()
      const s = time.getSeconds()
      item.currentTime =
        y +
        '-' +
        this.add0(m) +
        '-' +
        this.add0(d) +
        ' ' +
        this.add0(h) +
        ':' +
        this.add0(mm) +
        ':' +
        this.add0(s)
    },
    add0(m) {
      return m < 10 ? '0' + m : m
    },
    // 搜索
    // 搜索框输入内容变化时触发
    searchChange() {
      console.log(this.searchText, 'searchText')
      const vm = this
      let value = this.searchText
      value = value.trim()
      const tmpData = JSON.parse(JSON.stringify(vm.searchData))
      vm.data = tmpData.filter(
        (item) =>
          String(item.name).includes(value) ||
          String(item.category).includes(value) ||
          String(item.power).includes(value) ||
          String(item.founder).includes(value) ||
          String(item.currentTime).includes(value) ||
          String(item.type).includes(value)
      )
      console.log(' vm.searchData', vm.data)
    }
  }
}
</script>
<style>
.fan_container {
  height: 100%;
  width: 100%;
  padding: 31px 32px;
  /* background-color: blue; */
  background-color: rgba(246, 246, 250);
}
.fan_container .fan_content {
  height: 100%;
  width: 100%;
  padding-top: 24px;
  z-index: 7;
  background: #ffffff;
  box-shadow: 0px 10px 21px rgba(3, 57, 165, 0.08);
  border-radius: 12px;
}
/* 标题 最左上角的 */
.fan_content .title {
  margin-left: 36px;
  font: bold 20px 'PingFang SC';
}
/* 第二行的按钮和搜索框 */
.fan_content .function {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  padding: 0 36px;
}
/* 第二行按钮 */
.fan_content .function .ant-btn {
  height: 35px;
  width: 100px;
  color: #ffffff;
  font: bold 16px 'PingFang SC';
  background-color: #2c5bb9;
  border-color: #2c5bb9;
  box-shadow: 0px 7px 14px rgba(44, 91, 185, 0.47);
}
/* 第二行输入框 */
.function .ant-input-affix-wrapper .ant-input {
  border: 1px solid #2c5bb9;
}
.function .ant-input-prefix .anticon {
  font-size: 18px;
  color: #8f97a8;
}
.ant-input-affix-wrapper .ant-input-prefix {
  left: 6px;
}
.fan_content .function .ant-input-affix-wrapper {
  height: 35px;
  width: 293px;
}
/* 表格 */
.fan_content .table {
  margin-top: 25px;
}
/* 分页页数样式 */
.fan_content .ant-pagination-item a,
.fan_container .ant-pagination-disabled a {
  color: #8f97a8;
}
.fan_content .ant-pagination-item,
.fan_content .ant-pagination-prev .ant-pagination-item-link,
.fan_content .ant-pagination-next .ant-pagination-item-link {
  border-color: #8f97a8;
}
.fan_content .ant-pagination-next .ant-pagination-item-link:hover,
.fan_content .ant-pagination-prev .ant-pagination-item-link:hover {
  border-color: #4c72bd;
  color: #4c72bd;
}
.fan_content .ant-pagination .ant-pagination-item-active a {
  color: #fff;
}
.fan_content .ant-pagination .ant-pagination-item-active {
  background-color: #4c72bd;
  border-color: #4c72bd;
}
/* 表格行hover */
.fan_content .ant-table-body .ant-table-tbody .ant-table-row:hover td {
  background-color: #f2f7fa;
}
/* 操作删除编辑按钮 */
.fan_content .table .deleteImg {
  margin-left: 34px;
  height: 22px;
  width: 17px;
  cursor: pointer;
}
.fan_content .table .editImg {
  height: 23px;
  width: 23px;
  cursor: pointer;
}
.deleteText {
  font-size: 16px;
}
.icon-zhiwei-quanbuzhiwei {
  font-size: 16px;
  color: #0339a5;
}
.ant-modal-title {
  color: #fff;
}
/* 弹出框表头 修改默认组件需要全局样式才能完成修改 */
.ant-modal-header {
  background-color: #0339a5;
}
.ant-modal-footer .ant-btn {
  border: 1px solid #2c5bb9;
}
.ant-modal-footer .ant-btn-primary {
  background-color: #2c5bb9;
}
.ant-table-tbody tr td:last-child {
  display: flex;
  padding: 16px 0px 16.5px 16px;
}
/* 表头颜色*/
.ant-table-column-title {
  font: bold 18px 'PingFang SC';
  color: #142c5c;
}
.ant-table {
  font-size: 16px;
  color: #575c66;
}
.ant-table-content .ant-table-body .ant-table-thead > tr > th {
  background-color: rgba(229, 235, 247, 1);
}

.ant-form-item-required::before {
  display: none;
}
</style>
